<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <v-app v-if="isLoading" full-height>
        <v-main>
            <div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100%;">
                <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
            </div>
        </v-main>
    </v-app>
    <v-app v-else>
        <v-container fluid>
            <v-app-bar floating color="#242f42" elevation="0">
                <v-row style="margin-right: 1%;height: 100%;" justify="space-between">
                    <div style="display: flex;user-select: none;height: 100%;align-items: center;margin-left: 1.5%;">
                        <v-img src="/logo-white.png" width="50" height="50"></v-img>
                        <span style="font-size: large;margin-left: 7%;white-space: nowrap;">教学管理系统</span>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <div @mouseenter="profileActive = false">
                            <v-menu>
                                <template v-slot:activator="{ props }">
                                    <v-scroll-x-reverse-transition>
                                        <input v-show="search" type="text" class="search-input" placeholder="搜索菜单..."
                                            v-bind="props" v-model="searchContent" @input="searchMenu(searchContent)"
                                            style="color:#fff;" />
                                    </v-scroll-x-reverse-transition>
                                </template>
                                <v-list width="200px" style="user-select: none;">
                                    <v-list-item prepend-avatar="/nodata.png" v-if="sMenu.length == 0">
                                        <v-list-item-title>
                                            无内容
                                        </v-list-item-title>
                                    </v-list-item>
                                    <v-list-item v-else v-for="(item, index) in sMenu" :key="index"
                                        @click="navigate(item.route1, item.route2, item.route3)" style="cursor: pointer;">
                                        <v-list-item-title>
                                            {{ item.name1 }}
                                        </v-list-item-title>
                                        <v-list-item-subtitle>
                                            {{ item.name2 }} > {{ item.name3 }}
                                        </v-list-item-subtitle>
                                    </v-list-item>
                                </v-list>
                            </v-menu>
                            <v-btn :icon="search ? 'mdi-magnify-remove-outline' : 'mdi-magnify'" @click="search = !search">
                            </v-btn>
                        </div>
                        <v-menu open-on-hover v-model="profileActive">
                            <template v-slot:activator="{ props }">
                                <v-card color="#242f42" v-bind="props" class="avatar-box" width="200px"
                                    style="cursor: pointer" @mouseenter="profileActive = true">
                                    <v-avatar size="50">
                                        <v-img v-if="useUserStore().profile != ''" :src="useUserStore().profile" cover>
                                        </v-img>
                                        <v-icon v-else icon="mdi-account-circle" size="50" color="white">
                                        </v-icon>
                                    </v-avatar>
                                    <span style="margin-left: 8%;font-size: large;">{{ useUserStore().name }}</span>
                                </v-card>
                            </template>
                            <v-list width="200px" @mouseleave="profileActive = false" color="blue">
                                <v-list-item v-if="useUserStore().role != 'ADMIN'" @click="() => {
                                    navigate('desktop', 'self-info', 'detail')
                                    useNaviStore().addChip('详细信息', 'desktop', 'self-info', 'detail')
                                }">
                                    个人信息
                                </v-list-item>
                                <v-list-item @click="navigateBlog()" color="#242f42"
                                    v-if="useUserStore().role === 'STUDENT'">
                                    我的博客
                                </v-list-item>
                                <v-list-item @click="logout()">
                                    退出登录
                                </v-list-item>
                            </v-list>
                        </v-menu>
                    </div>
                </v-row>
            </v-app-bar>
            <v-main style="justify-content: start;align-items: start;">
                <v-row>
                    <v-navigation-drawer color="#324157">
                        <v-list open-strategy="single" mandatory style="padding-top: 0;">
                            <v-list-item prepend-icon="mdi-home" title="首页" style="user-select: none;" :active="homeActive"
                                @click="navigateHome()" active-class="drawer-item">
                            </v-list-item>
                            <v-list-group v-for="submenu1 in menu.itemList" :key="submenu1.name" :index="submenu1.route"
                                style="user-select: none;">
                                <template v-slot:activator="{ props }">
                                    <v-list-item v-bind="props" :title="submenu1.name">
                                        <template v-slot:prepend>
                                            <v-icon :icon="submenu1.icon" size="24"></v-icon>
                                        </template>
                                    </v-list-item>
                                </template>
                                <v-list-group v-for="submenu2 in submenu1.children" :key="submenu2.name"
                                    :index="submenu2.route">
                                    <template v-slot:activator="{ props }">
                                        <v-list-item v-bind="props">
                                            <v-list-item-title>
                                                <span>{{ submenu2.name }}</span>
                                            </v-list-item-title>
                                        </v-list-item>
                                    </template>
                                    <v-list-item v-for="item in submenu2.children" :key="item.name" :index="item.route"
                                        :active="item.isExpand" :value="item.name" :title="item.name" @click="() => {
                                            navigate(submenu1.route, submenu2.route, item.route)
                                        }">
                                    </v-list-item>
                                </v-list-group>
                            </v-list-group>
                        </v-list>
                        <template v-slot:append v-if="useUserStore().role === 'STUDENT'">
                            <div>
                                <v-btn block size="50px" color="blue-lighten-2" @click="navigateBlog()">
                                    <v-icon size="20" icon="mdi-file-document-outline" color="white"></v-icon>
                                    <span style="color: white;">博客</span>
                                </v-btn>
                            </div>
                        </template>
                    </v-navigation-drawer>
                    <v-col style="margin: 0%;padding: 0%;">
                        <el-affix :offset="70" z-index="999">
                            <div class="scrolling-chips-container">
                                <v-chip-group mandatory="force" v-model="useNaviStore().selectedChip"
                                    class="chip-navigator">
                                    <v-chip v-for="chip in useNaviStore().chipGroup" color="blue" :key="chip.name"
                                        style="user-select: none;"
                                        :prepend-icon="useNaviStore().selectedChip == chip.index ? 'mdi-star-circle' : undefined"
                                        @click:close="() => {
                                            if (chip.index === useNaviStore().selectedChip) navigateHome()
                                            useNaviStore().deleteChip(chip.index)
                                        }"
                                        @click="(chip.route2 && chip.route3) ? navigate(chip.route1, chip.route2, chip.route3) : navigateHome()"
                                        :closable="chip.index != 0">
                                        {{ chip.name }}
                                    </v-chip>
                                </v-chip-group>
                                <v-divider></v-divider>
                            </div>
                        </el-affix>
                        <router-view />
                    </v-col>
                </v-row>
            </v-main>
        </v-container>
    </v-app>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeMount } from "vue";
import { delUserInfo } from '@/utils/userUtil';
import { useUserStore, useNaviStore } from '@/stores/index';
import router from '@/router';
import { GetMainMenu } from '@/controllers/baseController';
import { type Menu } from '@/models/menu'
import { message } from '@/utils/message'
import { onBeforeRouteUpdate } from "vue-router";
import { onUnmounted } from "vue";
//主菜单
let menu = ref({} as Menu)
//头像菜单是否弹出
let profileActive = ref(false)
//加载
let isLoading = ref(true)
//导航栏
let homeActive = ref(true)
//搜索菜单
let search = ref(false)
let sMenu = ref([] as any[])
let searchContent = ref('')

onBeforeMount(() => {
    onBeforeRouteUpdate((to, from, next) => {
        let route = to.path.split('/')
        if (route.length == 2) actHome()
        else if (route.length == 4) actItem(route[1], route[2], route[3])
        next()
    });
})

onMounted(() => {
    getMainMenu()
})
onUnmounted(() => {
    onBeforeRouteUpdate(() => { });
})
async function getMainMenu() {
    try {
        const newMenu = await GetMainMenu()
        menu.value = newMenu
    } catch (err: any) {
        if (err.message === '用户未登录') {
            message('登录信息过期')
            useUserStore().logout()
            delUserInfo()
            setTimeout(function () {
                router.push('/Login')
            }, 2000)
        }
        else {
            message(err.message)
        }
    } finally {
        isLoading.value = false
    }
}
function actItem(route1: string, route2: string, route3: string) {
    homeActive.value = false
    menu.value.itemList.forEach((first) => {
        if (first.route == route1) {
            first.children!.forEach((second) => {
                if (second.route == route2) {
                    second.children!.forEach((leaf) => {
                        if (leaf.route == route3) {
                            leaf.isExpand = true
                            useNaviStore().addChip(leaf.name, first.route, second.route, leaf.route)
                        }
                        else {
                            leaf.isExpand = false
                        }
                    })
                }
                else {
                    second.children!.forEach((leaf) => {
                        leaf.isExpand = false
                    })
                }
            })
        }
        else {
            first.children?.forEach((second) => {
                second.children!.forEach((leaf) => {
                    leaf.isExpand = false
                })
            })
        }
    })
}
function actHome() {
    homeActive.value = true
    menu.value.itemList.forEach((first) => {
        first.children?.forEach((second) => {
            second.children?.forEach((leaf) => {
                leaf.isExpand = false
            })
        })
    })
    useNaviStore().selectedChip = 0
}
function navigate(route1: string, route2: string, route3: string) {
    router.push(`/${route1}/${route2}/${route3}`)
    actItem(route1, route2, route3)
}
function navigateHome() {
    router.push(`/`)
    actHome()
}
function logout() {
    useUserStore().logout()
    delUserInfo()
    router.push('/Login')
}
function searchMenu(name: string) {
    sMenu.value = []
    if (name.length == 0) return
    menu.value.itemList.forEach((first) => {
        let flag1 = first.name.includes(name)
        first.children?.forEach((second) => {
            let flag2 = flag1 || second.name.includes(name)
            second.children!.forEach((leaf) => {
                let flag3 = flag2 || leaf.name.includes(name)
                if (flag3) {
                    sMenu.value.push(
                        {
                            name1: first.name,
                            name2: second.name,
                            name3: leaf.name,
                            route1: first.route,
                            route2: second.route,
                            route3: leaf.route
                        }
                    )
                }
            })
        })
    })
}
function navigateBlog() {
    window.open('/blog', '_blank')
}
</script>

<style scoped>
.avatar-box {
    display: flex;
    align-items: center;
    padding: 5px;
}


.search-input {
    border-radius: 5px;
    border: 0.01px solid gray;
    width: 200px;
    font-size: smaller;
    padding: 10px;
}

.scrolling-chips-container {
    background-color: white;
    margin-top: -0.5%;
}
</style>
